<template>
  <div>
    <div class="download-title">
      <div class="fleft down-fl">
        <ul>
          <li class="on" v-for="(item,index) in leftList" :key="index"><a href="">{{ item }}</a></li>

        </ul>
      </div>
      <div class="fright down-fr">
                     <span class="down-sn">
                                               <em class="t-ac">热门搜索</em>
                                                     <a href="#" v-for="(item,index) in rightList" :key="index">{{ item }}</a>
                                                                       </span>
        <form class="down-form fright" name="searchForm" method="get" action="search.php">
          <input class="btn" type="submit" value="">
          <input class="text" name="keywords" type="text" value="请输入你要搜索的内容" onfocus="if(this.value=='请输入你要搜索的内容')this.value='';" onblur="if(this.value=='')this.value='请输入你要搜索的内容';">
        </form>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Title",
  data(){
    return{
      leftList:['默认下载','最新下载','热门下载'],
      rightList:['热门搜索','中华经典素读范本','广东学导练','广东中考','书法教材','国学经典','吟诵'],

    }
  }
}
</script>

<style scoped>
.download-title {
  overflow: hidden;
  /*margin: 80px 0 20px 0;*/
  width: 75em;
  margin: 2em auto;
  /*margin-left: 25em;*/
}
.down-fl {
  font-size: 14px;
  border-left: 1px solid #dedddd;
}
.fleft, .uleft li {
  float: left;
  display: inline;
}
.down-fl ul li {
  float: left;
  border-right: 1px solid #dedddd;
  padding: 0 15px;
}
.down-fl ul li.on a {
  color: #b50029;
}
.fright {
  float: right;
  display: inline;
}
.down-form {
  width: 279px;
  height: 30px;
  /*background: url(../skin/icon17.png) no-repeat;*/
  overflow: hidden;
  margin-left: 18px;
}
.down-sn a {
  margin: 0 5px;
}
</style>